<template>
    <div class="basic-info card">
        <div class="title">基本信息</div>
        <div class="form-box">
            <el-form ref="formInlineRef" :model="formInline" :rules="rules" label-width="100px">
                <el-row :gutter="20">
                    <el-col :span="12" :xs="24">
                        <el-form-item label="姓名" required prop="nickName">
                            <el-input v-model="formInline.nickName" placeholder="请输入考生姓名" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" :xs="24">
                        <el-form-item label="性别">
                            <el-select v-model="formInline.sex" placeholder="请选择性别" clearable>
                                <el-option v-for="item in sys_user_sex" :key="item.dictValue" :label="item.dictLabel"
                                    :value="item.dictValue" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" :xs="24">
                        <el-form-item label="出生日期">
                            <el-date-picker v-model="formInline.birthday" type="date" placeholder="请选择出生日期" clearable
                                format="YYYY/MM/DD" value-format="YYYY-MM-DD HH:mm:ss" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" :xs="24">
                        <el-form-item label="年龄">
                            <el-input v-model="formInline.age" placeholder="请输入年龄" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" :xs="24">
                        <el-form-item label="身份证号" required prop="idcard">
                            <el-input v-model="formInline.idcard" placeholder="请输入个人身份证号" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" :xs="24">
                        <el-form-item label="民族">
                            <el-input v-model="formInline.nation" placeholder="请输入民族" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" :xs="24">
                        <el-form-item label="人员属性">
                            <el-select v-model="formInline.personnelAttributes" placeholder="请选择人员属性" clearable>
                                <el-option v-for="item in sys_personnel_attributes" :key="item.dictValue"
                                    :label="item.dictLabel" :value="parseInt(item.dictValue)" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" :xs="24">
                        <el-form-item label="证件号" required prop="certificateNumber">
                            <el-input v-model="formInline.certificateNumber" placeholder="请输入干部证/消防员证号" clearable />
                        </el-form-item>
                    </el-col>
                    <!-- <el-col :span="12" :xs="24">
                        <el-form-item label="户口所在地">
                            <el-cascader v-model="formInline.area" :options="areaOptions" :props="areaProps"
                                placeholder="请选择所属区县" />
                        </el-form-item>
                    </el-col> -->
                    <el-col :span="12" :xs="24">
                        <el-form-item label="政治面貌">
                            <el-select v-model="formInline.politicalOutlook" placeholder="请选择政治面貌" clearable>
                                <el-option v-for="item in sys_political_outlook" :key="item.dictValue"
                                    :label="item.dictLabel" :value="item.dictValue" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <!-- <el-col :span="24" :xs="24">
                        <el-form-item label="身份证地址">
                            <el-input v-model="formInline.idAddress" :autosize="{ minRows: 2, maxRows: 4 }" type="textarea"
                                placeholder="请输入身份证详细地址" />
                        </el-form-item>
                    </el-col> -->
                </el-row>
            </el-form>
            <div class="text-center">
                <UserAvatar ref="userAvatar" />
                <el-button style="margin-top: 24px;" type="primary" @click="onSelectAvatar">选择</el-button>
            </div>
        </div>
    </div>
</template>

<script setup>
import UserAvatar from "../userAvatar";
import { getSysArea } from '@/api/system/sysArea';
import { useVModel } from '@vueuse/core'
const props = defineProps({
    modelValue: {
        type: Object,
        default: () => ({})
    }
})

const emit = defineEmits(['update:modelValue']);
const formInline = useVModel(props, 'modelValue', emit)

const userAvatar = ref(null)
const { proxy } = getCurrentInstance();
const {
    sys_personnel_attributes, sys_user_sex, sys_political_outlook
} = proxy.useDict('sys_personnel_attributes', 'sys_user_sex', 'sys_political_outlook');

const areaOptions = ref([])
const areaProps = reactive({
    expandTrigger: 'hover',
    label: 'shortName',
    value: 'id',
    emitPath: false
})
function getArea() {
    getSysArea({ areaCode: '330000000000' }).then(res => {
        areaOptions.value = res.data
    })
}
// getArea()

function onSelectAvatar() {
    userAvatar.value.editCropper()
}
const rules = ref({
    nickName: [
        { required: true, message: '请输入考生姓名', trigger: 'blur' }
    ],
    idcard: [
        { required: true, message: '请输入身份证号', trigger: 'blur' }
    ],
    certificateNumber: [
        { required: true, message: '请输入干部证/消防员号', trigger: 'blur' }
    ]
})
const formInlineRef = ref()
function submitValidate() {
    return new Promise((resolve, reject) => {
        formInlineRef.value.validate((valid) => {
            if (valid) {
                resolve('submit')
            } else {
                reject(valid)
                return false
            }
        })
    })

}
defineExpose({
    submitValidate
})
</script>
<style scoped lang="scss">
.basic-info {
    padding: 19px 16px;

    :deep(.el-form) {
        .el-date-editor {
            --el-date-editor-width: 100%;
        }

        .el-select {
            width: 100%;
        }
    }

    .form-box {
        display: flex;
        column-gap: 20px;
    }
}
</style>